﻿@model UrlSelector
@{
    // get config object
    var configObj = Model.GetConfigObject<UrlSelectorConfigObject>();

    // create area id
    var areaId = Model.GetUniqueElementId("us_", "_us");
    var pickerId = Model.GetUniqueElementId("us_intpicker_", "_us_intpicker");

    // get selecteds
    var internalSelected = Model.AddedUrl.UrlType == AddedUrlType.Internal ? "us-tab-selected" : "";
    var externalSelected = Model.AddedUrl.UrlType == AddedUrlType.External ? "us-tab-selected" : "";
    var mailToSelected = Model.AddedUrl.UrlType == AddedUrlType.MailTo ? "us-tab-selected" : "";

    // add content
    Html.AddToBackEndContent("~/Areas/ProggyCore/Content/Css/UrlSelector.css", BackEndContentType.Stylesheet);

    // add for lightbox
    Html.RenderBackEndContentForLightboxPartial();
}
<noscript>
    <div class="proggy-noscript">
        THIS EDITOR WILL NOT WORK WITHOUT JAVASCRIPT TURNED ON AND IT WOULD BE DANGEROUS
        TO USE THE EDITOR WHILST JAVASCRIPT IS TURNED OFF. PLEASE TURN JAVASCRIPT ON.</div>
</noscript>
<div id="@areaId" class="us">
    @Html.Hidden(Model.PropertyNameStart + ".AddedUrl.UrlType", Model.AddedUrl.UrlType)
    <h5>
        Core propert@(configObj.RequireName || configObj.RequireDescription ? "ies" : "y")</h5>
    <div class="us-core">
        <p>
            <label>
                Link title</label>
            @Html.TextBox(Model.PropertyNameStart + ".AddedUrl.LinkTitle", Model.AddedUrl.LinkTitle, new { @class = "proggy-textbox proggy-textbox-wide" })
        </p>
        @if (configObj.RequireName)
        { 
            <p>
                <label>
                    Text</label>
                @Html.TextBox(Model.PropertyNameStart + ".AddedUrl.Text", Model.AddedUrl.Text, new { @class = "proggy-textbox proggy-textbox-wide" })
            </p>
        }
        @if (configObj.RequireName)
        { 
            <p>
                <label>
                    Description</label>
                @Html.TextArea(Model.PropertyNameStart + ".AddedUrl.Description", Model.AddedUrl.Description, new { @class = "proggy-textarea proggy-textarea-large", style = "height: 5em;" })
            </p>
        }
    </div>
    <h5>
        Link type / data</h5>
    <div class="us-tabs">
        @if (configObj.AllowInternal)
        {
            <div class="us-tab us-tab-internal @internalSelected" data-enum="@AddedUrlType.Internal">
                Site link
            </div>
        }
        @if (configObj.AllowExternal)
        { 
            <div class="us-tab us-tab-external @externalSelected" data-enum="@AddedUrlType.External">
                External link
            </div>
        }
        @if (configObj.AllowMailTo)
        { 
            <div class="us-tab us-tab-mailto @mailToSelected" data-enum="@AddedUrlType.MailTo">
                Email link
            </div>
        }
        @Html.Clear()
    </div>
    <div class="us-contents">
        @if (configObj.AllowInternal)
        {
            <div class="us-content us-content-internal" data-enum="@AddedUrlType.Internal">
                <div class="us-internal-selected">
                    @Html.Hidden(Model.PropertyNameStart + ".AddedUrl.NodeId", Model.AddedUrl.NodeId)
                    <p class="strong">
                        Selected content:</p>
                    <div class="us-internal-selected-display">
                        @{
            Html.RenderAction("SelectedContent", new { controller = "UrlSelector", area = "ProggyCore", nodeId = Model.AddedUrl.NodeId });    
                        }
                    </div>
                </div>
                <div class="us-internal-choose">
                    @Html.ActionLink("Choose >>", "UrlSelector", new { controller = "UrlSelector", area = "ProggyCore", pickerId = pickerId, selected = Model.AddedUrl.NodeId }, new { @class = "proggy-button" })
                </div>
            </div>
        }
        @if (configObj.AllowExternal)
        { 
            <div class="us-content us-content-external" data-enum="@AddedUrlType.External">
                <p>
                    <label>
                        Url</label>
                    @Html.TextBox(Model.PropertyNameStart + ".AddedUrl.ExternalUrl", Model.AddedUrl.ExternalUrl, new { @class = "proggy-textbox proggy-textbox-wide" })
                </p>
            </div>
        }
        @if (configObj.AllowMailTo)
        { 
            <div class="us-content us-content-mailto" data-enum="@AddedUrlType.MailTo">
                <p>
                    <label>
                        Address</label>
                    @Html.TextBox(Model.PropertyNameStart + ".AddedUrl.MailToAddress", Model.AddedUrl.MailToAddress, new { @class = "proggy-textbox proggy-textbox-wide" })
                </p>
                <p>
                    <label>
                        Subject (optional)</label>
                    @Html.TextBox(Model.PropertyNameStart + ".AddedUrl.MailToSubject", Model.AddedUrl.MailToSubject, new { @class = "proggy-textbox proggy-textbox-wide" })
                </p>
            </div>
        }
    </div>
</div>
<script type="text/javascript">
   
    //
    Proggy.Static.WaitForTypesToRegister(function () {

        // get area
        var area = jQuery("div#@(areaId)");

        // get contents
        var contents = area.find("div.us-content");

        // hide contents
        contents.hide();

        // get hidden
        var hiddenType = area.find("input#@(string.IsNullOrEmpty(Model.PropertyNameStart) ? "" : Model.PropertyNameStart + "_")AddedUrl_UrlType");
        //console.log(hiddenType);

        // get type
        var type = hiddenType.val();

        // get tabs
        var tabs = area.find("div.us-tab");

        // get selected
        var selectedTab = area.find("div.us-tab-selected:first");

        // bind tabs
        tabs.click(function () {

            // get
            var tab = jQuery(this);

            // get enum
            var enm = tab.data("enum");

            // set hidden
            hiddenType.val(enm);
            //console.log(hiddenType);

            // remove selected
            area.find("div.us-tab-selected").removeClass("us-tab-selected");

            // add class
            tab.addClass("us-tab-selected");

            // hide contents
            contents.hide();

            // find content to select
            selectedContent = area.find("div.us-content[data-enum='" + enm + "']:first");

            // show
            selectedContent.show();

        });

        // get content picker button
        var cpButton = area.find("div.us-internal-choose > a:first");

        // bind content picker button
        cpButton.click(function (e) {

            // 
            Proggy.Static.InitialLoadIntoLightbox(cpButton, e, function (lb, lbInner) {

                // bind site map ***************

                //
                var siteMap = new Proggy.SiteMap();

                //
                siteMap.Init("@pickerId", false, false, function (theItem) {


                    // get node id selected
                    var selectedId = theItem.data("nodeid");

                    // set hidden
                    area.find("div.us-internal-selected > input:first").val(selectedId);

                    // fetch content
                    jQuery.get(window.ROOT_URL + "ProggyCore/UrlSelector/SelectedContent?nodeId=" + selectedId, function (r, s, x) {

                        // find area
                        var slctTextArea = area.find("div.us-internal-selected-display:first");

                        // replace
                        slctTextArea.html(jQuery(r));

                        // get url array
                        var buttonUrlArray = cpButton.attr("href").split('&selected=');

                        // get new url
                        var newUrl = buttonUrlArray[0] + "&selected=" + selectedId;

                        // change
                        cpButton.attr("href", newUrl);

                        // close
                        lb.dialog("close");

                    });



                });

            });
        });

        // bind content button
        area.on("click", "a.us-internal-selected-display-partial-link", function (e) {

            // 
            e.preventDefault();

            // remove display
            jQuery(this).parent().html("No content yet selected");

            // remove value
            area.find("div.us-internal-selected > input:first").val("");

            // get url array
            var buttonUrlArray = cpButton.attr("href").split('&selected=');

            // get new url
            var newUrl = buttonUrlArray[0] + "&selected=";

            // change
            cpButton.attr("href", newUrl);

        });

        // click selected
        selectedTab.click();

    });

</script>
